<template>
	<view class="details-box">
		<view class="top-box">
			<view class="left-box">
				<u-avatar class="img" bg-color="#7ECEF4" size="100" :src="caseData.avatar"></u-avatar>
			</view>
			<view class="right-box">
				<view class="top">发布人：{{caseData.name || ''}}</view>
				<view class="bottom">案件类型：{{caseData.lawyer_type || ''}}</view>
			</view>
		</view>
		<view class="center-box">
			<view class="title">具体需求</view>
			<view class="text-container">{{caseData.demand || ''}}</view>
		</view>
		<view class="bottom-box">
			<view class="bottom-item">
				<text>联系人：{{caseData.name || ''}}</text>
				<text>{{caseData.mobile || ''}}</text>
			</view>
			<view class="bottom-item">
				<text>金额</text>
				<text class="text-color">{{caseData.money || 0}}</text>
			</view>
			<view class="bottom-item">
				<text>地区</text>
				<text>{{caseData.province + '-' + caseData.city}}</text>
			</view>
		</view>
		<view class="btns-box">
			<block v-if="caseData.status === 2">
				<u-button :custom-style="btn1Style" :hair-line="false" class="left-btn u-flex-1" @click="delTipModelShow = true">取消订单</u-button>
				<u-button :custom-style="btn2Style" :hair-line="false" class="right-btn u-flex-1" @click="phoneClick">联系客户</u-button>
			</block>
		</view>
		<!-- 删除帖子的提示 -->
		<delete-model
			:show="delTipModelShow"
			tip="是否确认取消此订单？"
			:rightColor="false"
			cancelText="不取消"
			confirmText="确认取消"
			@cancel="delTipModelShow = false"
			@confirm="itemDeleteClick"
		></delete-model>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: 0,		// 来源页传递的案子 id 
			caseData: {},
			// 按钮的样式，为了兼容所以这样写
			btn1Style: {
				height: '100%',
				border: 0,
				borderRadius: 0,
				color: '#FEFEFE',
				backgroundColor: '#00C9B1',
				opacity: 0.6
			},
			btn2Style: {
				height: '100%',
				border: 0,
				borderRadius: 0,
				color: '#FEFEFE',
				backgroundColor: '#00C9B1'
			},
			delTipModelShow: false,
			
		};
	},
	// 在此接收到传递过来的参数即案件 id
	onLoad(options) {
		this.id = options.id
		this.getData()
	  },
	  methods: {
		  async getData() {
			  const res = await this.$u.api.getcaseItemDetail({order_id: this.id})
			  if(!res) return
			  this.caseData = res
			  console.log( this.caseData);
		  },
		  // 取消订单的 确认 事件
		  async itemDeleteClick() {
			  const res = await this.$u.api.cancelOrderItem({order_id: this.id})
			  if(!res) return
			  this.$u.vuex('vuex_isSubmit', true)	// 需要在来源页刷新下数据
			  this.$u.route({
				  type: 'back'
			  })
			  this.$u.toast('订单取消成功')
			  this.delTipModelShow = false
		  },
		  // 联系客户按钮点击事件
		  phoneClick() {
			  uni.makePhoneCall({
			  	phoneNumber: this.caseData.mobile
			  })
		  }
	  }
};
</script>

<style lang="scss" scoped>
	.details-box {
		min-height: calc(100vh - 90rpx);
		background-color: $u-bg-color;
		.top-box {
			display: flex;
			background-color: white;
			padding: 18rpx;
			.left-box {
				background-color: #7ECEF4;
				display: block;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.right-box {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.top {
					font-size: 36rpx;
					color: #141418;
					font-weight: 700;
				}
				.bottom {
					color: #999999;
				}
			}
		}
		.center-box {
			margin-top: 19rpx;
			background-color: white;
			padding: 28rpx 18rpx;
			.title {
				font-size: 34rpx;
				color: #141418;
				margin: 36rpx 0;
			}
			.text-container {
				font-size: 30rpx;
				color: #141418;
			}
			
		}
		.bottom-box {
			margin-top: 19rpx;
			background-color: white;
			padding:28rpx;
			font-size: 30rpx;
			color: #141418;
			.bottom-item {
				line-height: 50rpx;
				display: flex;
				justify-content: space-between;
				
			}
			
		}
		.btns-box {
			width: 100%;
			height: 90rpx;
			display: flex;
			color: #FEFEFE;
			background-color: $bgc;
			font-size: 32px;
			position: fixed;
			bottom: 0;
			left: 0;
			.left-btn {
				border-radius: 0;
				opacity: 0.6;
			}
			.right-btn {
				border-radius: 0;
				background-color: $u-text-color;
			}
		}
	}
	.text-color {
		color: $u-text-color;
	}
</style>
